<template>
  <div>
    <el-col>
      <el-tabs>
        <el-tab-pane label="副本攻略">
          <el-col style="padding: 8px">
            <el-col>
              <el-form :inline="true">
                <el-form-item>
                  <el-input v-model="searchVal" style="width: 800px"></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button plain @click="search">查询</el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col class="copy-item" v-for="item in copyData.list" :key="item.ID">
              <el-card shadow="hover" style="height: 95%">
                <el-row>
                  <el-col :span="4">
                    <el-col style="height: 100px">
                      <img :src="getPicUrl(item.post_banner)"
                           style="margin: 0 auto;height: 100%;width: 100%;object-fit: cover;"/>
                    </el-col>
                    <!--                    <el-image style="height: 183px" fit="scale-down" :src="getPicUrl(item.post_banner)"></el-image>-->
                  </el-col>

                  <el-col :span="16">
                    <el-col :span="22"
                            style="margin-left: 10px;white-space: nowrap;overflow:hidden;text-overflow: ellipsis">
                      <el-link type="primary" style="font-size: 17px; padding:5px" @click="openWin(item.ID)">
                        {{ item.post_title }}
                      </el-link>
                      <br/>
                      <el-link type="success" :underline="false">
                        首领:&nbsp;&nbsp;&nbsp;&nbsp;
                        <span v-if="item.post_meta.fb_boss.length === 0">全部</span>
                        <template v-for="bs in item.post_meta.fb_boss" :key="bs">
                            <span>
                              {{ bs }}&nbsp;&nbsp;&nbsp;
                            </span>
                        </template>
                        <!--                          {{item.post_title}}-->
                      </el-link>
                      <br/>

                      <el-link type="success" :underline="false" style="white-space: nowrap;">
                        难度:&nbsp;&nbsp;&nbsp;&nbsp;
                        <span v-if="item.post_meta.fb_level.length === 0">全部</span>
                        <template v-for="bs in item.post_meta.fb_level" :key="bs">
                            <span>
                              {{ bs }}&nbsp;&nbsp;&nbsp;
                            </span>
                        </template>
                        <!--                          {{item.post_title}}-->
                      </el-link>
                    </el-col>


                  </el-col>
                  <el-col :span="4"></el-col>
                </el-row>
              </el-card>
            </el-col>
          </el-col>
          <el-col style="margin: 20px">
            <el-pagination background layout="pager" :total="copyData.total" :current-page="page"
                           @current-change="getCopyListByPage" style="margin-left: 30%;"/>
          </el-col>
        </el-tab-pane>

        <el-tab-pane label="副本掉落">aqwesd</el-tab-pane>
        <el-tab-pane label="首领数据">aqwesd</el-tab-pane>

      </el-tabs>
    </el-col>

    <el-drawer v-model="drawer" title="I am the title" :with-header="false" :size="900">
      <el-col v-html="message"></el-col>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue';
import {j3api} from "@/axios/j3http";

export default defineComponent({
  name: "CopyPage",
  data() {
    return {
      activeName: 'one',
      copyData: {},
      searchVal: '',
      page: 1,
      searchType: 0,
      drawer: false,
      message: ''
    }
  },
  methods: {
    getPicUrl(url: string) {
      // console.log(url);
      if (url === '') {
        return 'https://img.jx3box.com/image/fb_map_thumbnail/588.png'
      }
      url = url.replace('https://oss.jx3box.com/', 'https://cdn.jx3box.com/')
      return url
    },
    getCopyListByPage(page: number) {
      if (this.searchType === 0) {
        this.page = page
        j3api.getCopyList(page).then((res: any) => {
          this.copyData = res.data
        })
      }

      if (this.searchType === 1) {
        this.page = page
        j3api.searchCopyList(this.page, this.searchVal).then((res: any) => {
          this.copyData = res.data
        })
      }
    },
    search() {
      if (this.searchType === 0) {
        this.page = 1
        this.searchType = 1
      }
      j3api.searchCopyList(this.page, this.searchVal).then((res: any) => {
        this.copyData = res.data
      })
    },
    openWin(id: string) {
      // console.log(id);
      j3api.getCopyContent(id).then((res: any) => {
        this.message = res.data.post_content
        this.drawer = true
      })
    }
  },
  mounted() {
    j3api.getCopyList(this.page).then((res: any) => {
      this.copyData = res.data
      console.log(this.copyData);
    })
  }
})

</script>

<style scoped>

</style>
